<template>

  <div class="EchartPractice">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/Cost'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>堆存费可视化</el-breadcrumb-item>
    </el-breadcrumb>

    <div id="main"></div>
<!--    <div @click = "show" >获取</div>-->
  </div>
</template>

<script>
import res from "postcss-loader/lib/Error";

export default {
  name: "EchartPractice",
  data(){
    return{
      options:{
        title:{
          text:"出库表的堆存费"
        },
        tooltip:{},
        legend:{
          data: ["堆存费"]
        },
        xAxis:[{
          data: ["a"]
        }],
        yAxis:{},
        series:[{
          name:'堆存费',
          type:"bar",
          data: [10]
        }]
      },
      queryInfo:{
        name : '',
        cost: ''
      },
      datalist:[],
      costlist:[],
    }
  },
  methods:{
    async show(){
      const {data:res} = await this.$http.post('chart').then(res=>{
        console.log(res)
      })
      this.costlist = [10]
      console.log(this.queryInfo.cost)
      this.costlist = res.cost
      console.log(this.costlist)
    },
    drawChart() {
      //this.datalist.push("a")


      let myEchart = this.$echarts.init(document.getElementById("main"));
      this.options.xAxis[0].data = this.datalist;
      this.options.series[0].data = this.costlist;
      myEchart.setOption(this.options);
    }
  },
  created() {
    this.show()
  },
  mounted() {

    this.drawChart();
  }
}
</script>

<style scoped>
#main {
  width: 600px;
  height:400px;
  margin: auto;
  margin-top: 100px
}
</style>

